import React from 'react'
import { Route, withRouter } from 'react-router-dom';
import {inject, observer} from 'mobx-react';
import QueueAnim from 'rc-queue-anim';
import {toJS} from 'mobx'
import {List,Tools,TextareaItem } from 'weaver-mobile'
const getLabel = Tools.getLabel;


@withRouter
@inject('docStore')
@observer
class DocAttribute extends React.Component{
    render(){
        const {docStore, path} = this.props;
        let docInfo = toJS(docStore.docInfo) || {};
        const attributePath = `${path || ''}/doc/:id/attribute`;
        const docParams = docInfo.docParams
        const Item = List.Item
        return(
            <div className="wea-doc-attribute-bg">
                <Route
                    key="doc-attribute"
                    path={attributePath}
                    render={()=>{
                        return(
                            <QueueAnim>
                                <div className="wm-route-layout" key="doc-attribute">
                                    <div className="wea-doc-attribute">
                                        <List>
                                            <Item
                                                    extra={
                                                            <div
                                                                dangerouslySetInnerHTML={{__html: docInfo.docTitle}} 
                                                            />
                                                        }
                                                        multipleLine={true}
                                                        key={docInfo.docTitleLabel}
                                                    > 
                                                        {docInfo.docTitleLabel}
                                                </Item>
                                        
                                            {docParams.map(val=>(
                                                <Item
                                                    extra={
                                                            <div
                                                                dangerouslySetInnerHTML={{__html: val.value}} 
                                                            />
                                                        }
                                                        multipleLine={true}
                                                        key={val.label}
                                                    > 
                                                        {val.label}
                                                </Item>
                                            ))}
                                        
                                        </List>
                                    </div>
                                </div>
                            </QueueAnim>
                        )
                    }}
                />
                
            </div>
        )
    }
}
export default DocAttribute